<template>
  <div class="GBO_card">
    <div class="head">
      <div
        class="total_nav"
        v-loading="allStatis_show"
        element-loading-text="拼命加载中"
        element-loading-spinner="el-icon-loading"
        element-loading-background="rgba(0, 0, 0, 0.6)"
      >
        <div
          class="list"
          v-for="(item, key) in total_list"
          :key="key"
          :class="changeClass(key, item)"
          @click="goDetail(key)"
        >
          <span style="font-weight: bold">{{ item.title }}</span>
          <span v-if="key < 5" style="color: red; font-weight: bold">{{
            item.data
          }}</span>
          <span v-if="key == 5" style="font-weight: bold"
            >{{ item.data }}
            <span style="font-size: 12px">{{ upOut }}</span>
          </span>
          <span class="span03" v-if="item.title == '总配置数'"
            >今日 + <span style="color: red">{{ item.add }}</span></span
          >
          <span class="span03" v-else-if="item.title == '今日申请数'"
            >实际下发 <span style="color: red">{{ item.add }}</span></span
          >
          <span class="span03" v-else-if="item.title == '今日续费数'"
            >实际续费 <span style="color: red">{{ item.add }}</span></span
          >
          <span class="span03" v-else-if="item.title == '阿里账户余额'">
            <!-- <span class="show">还需要 {{ item.add }}</span> -->
            <span>花费 {{ item.add }}</span>
          </span>
          <!-- <span class="span03 show" v-else-if="key== 5"
            ><span>实际需要 {{  item.add }}</span></span
          > -->
          <span class="span03" style="visibility: hidden" v-else>0</span>

          <div
            class="show"
            v-if="key == 3 || key == 4"
            style="letter-spacing: 0.5em; border-radius: 2px"
          >
            跳转详情
          </div>
        </div>
        <!-- <div class="list" @mouseenter="showDiv = !showDiv" @mouseout="showDiv = !showDiv">333</div>
        <div style="display: flex; margin-top: 20px; height: 100px">
          <transition name="el-fade-in-linear">
            <div v-show="showDiv" class="transition-box">0111111</div>
          </transition>
          <transition name="el-fade-in">
            <div v-show="showDiv" class="transition-box">06666666</div>
          </transition>
          <transition name="el-zoom-in-center">
            <div v-show="showDiv" class="transition-box">中</div>
          </transition>

          <transition name="el-zoom-in-top">
            <div v-show="showDiv" class="transition-box">上</div>
          </transition>

          <transition name="el-zoom-in-bottom">
            <div v-show="showDiv" class="transition-box">底</div>
          </transition>
        </div> -->
      </div>
      <div class="nav">
        <el-tabs v-model="activeName" @tab-click="handleClick">
          <el-tab-pane
            :label="item.platform_name"
            v-for="(item, index) in cardConfig.list01"
            :key="index"
            :name="item.id + ''"
          ></el-tab-pane>
        </el-tabs>
      </div>
      <!-- <div class="head01">
        <el-input clearable v-model="cardConfig.input01" placeholder="添加IP"></el-input>
        <el-button type="primary" @click="addIP(cardConfig.input01)">提交</el-button>

        <el-button type="primary">七天未使用返回IP池</el-button>
      </div>-->
      <el-dialog
        :visible.sync="dialogFormVisible"
        @close="dialogFormVisible == false"
        :title="aly_state.msg"
        class="addserve"
        center
        min-width="600px"
      >
        <el-form
          ref="dataForm"
          :rules="rules01"
          :model="cardConfig.temp"
          label-position="left"
          label-width="180px"
          style="min-width: 550px; margin-left: 50px"
        >
          <el-form-item label="账户余额">
            <span style="color: red; font-weight: bold; margin-right: 20px">{{
              aly_state.money
            }}</span>
            <el-input style="margin-right: 20px" v-model="aly_money" />
            <el-button
              type="primary"
              @click="add_money(0, 0)"
              :disabled="change_rote('accountBalanceAdd_card')"
              >增加</el-button
            >
            <el-button
              type="primary"
              :disabled="change_rote('accountBalanceAdd_card')"
              @click="add_money(0, 1)"
              >删减</el-button
            >
          </el-form-item>
          <el-form-item label="当前未购买与续费总金额">
            <span style="color: red; font-weight: bold; margin-right: 20px">{{
              aly_state.remain_money
            }}</span>
          </el-form-item>
          <el-form-item label="设定最小账户余额报警">
            <span style="color: #000; font-weight: bold; margin-right: 20px">{{
              aly_state.up_money
            }}</span>
            <el-input style="margin-right: 20px" v-model="aly_changeMoney" />
            <el-button
              type="primary"
              @click="add_money(1)"
              :disabled="change_rote('changemoney_card')"
              >修改</el-button
            >
          </el-form-item>
        </el-form>
        <div class="box">
          <p style="line-height: 30px">需求明细</p>
          <p style="line-height: 30px">
            已收款_未购买数
            <span
              >{{ aly_state.apply_num }} * 65 =
              {{ aly_state.apply_num * 65 }}
            </span>
          </p>
          <p style="line-height: 30px">
            已收款_未续费数
            <span
              >{{ aly_state.renew_num }} * 65 =
              {{ aly_state.renew_num * 65 }}</span
            >
          </p>
        </div>
        <!-- <div slot="footer" class="dialog-footer">
          <el-button @click="leave_ip()">离开</el-button>
          <el-button type="primary" @click="createData()">确定</el-button>
        </div> -->
      </el-dialog>
      <div class="head02">
        <el-form :inline="true" :model="cardConfig" class="demo-form-inline">
          <el-form-item class="one">
            <el-input
              clearable
              v-model="cardConfig.input02.business_name"
              placeholder="商户名"
            ></el-input>
          </el-form-item>
          <el-form-item class="two">
            <el-input
              clearable
              v-model="cardConfig.input02.ip"
              placeholder="服务IP"
            ></el-input>
          </el-form-item>
          <el-form-item class="two">
            <el-input
              clearable
              v-model="cardConfig.input02.wx_ip"
              placeholder="微信IP"
            ></el-input>
          </el-form-item>
          <el-form-item class="two">
            <el-input
              clearable
              v-model="cardConfig.input02.group_mark"
              placeholder="识别码"
            ></el-input>
          </el-form-item>
          <el-form-item class="three">
            <el-input
              clearable
              v-model="cardConfig.input02.bank_name"
              placeholder="持卡人姓名"
            ></el-input>
          </el-form-item>
          <el-form-item class="four">
            <el-select
              clearable
              v-model="cardConfig.input02.agent_id"
              placeholder="代理"
              @change="changeAgent_id"
            >
              <el-option
                :value="item.id"
                :label="item.name"
                v-for="(item, key) in cardConfig.agents_list"
                :key="key"
              ></el-option>
            </el-select>
          </el-form-item>
          <el-form-item class="four">
            <el-select
              clearable
              v-model="cardConfig.input02.group_id"
              placeholder="小组名"
            >
              <el-option
                :value="item.id"
                :label="item.name"
                v-for="(item, key) in cardConfig.groupList"
                :key="key"
              ></el-option>
              <!-- <el-option label="小组" value=''></el-option> -->
            </el-select>
          </el-form-item>
          <el-form-item class="four">
            <el-select
              clearable
              v-model="cardConfig.input02.is_ip"
              placeholder="IP"
            >
              <el-option label="未绑定ip" value="0"></el-option>
              <el-option label="绑定ip" value="1"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item class="four">
            <el-select
              clearable
              v-model="cardConfig.input02.is_business"
              placeholder="商户"
            >
              <el-option label="绑定商户" value="1"></el-option>
              <el-option label="未绑定商户" value="2"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item class="four">
            <el-select
              clearable
              v-model="cardConfig.input02.bank_id"
              placeholder="银行"
            >
              <el-option
                :label="item.values"
                :value="item.keys"
                v-for="(item, index) in payway_bank_list || []"
                :key="index"
              ></el-option>
            </el-select>
          </el-form-item>
          <el-form-item class="four">
            <el-select
              clearable
              v-model="cardConfig.input02.is_test"
              placeholder="测试状态"
            >
              <el-option label="通过" value="1"></el-option>
              <el-option label="未通过" value="0"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item class="one">
            <el-input
              clearable
              v-model="cardConfig.input02.note"
              placeholder="备注"
            ></el-input>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="onSubmit" plain>查询</el-button>
          </el-form-item>
        </el-form>
      </div>
      <div class="head03">
        <el-tag>
          &nbsp;&nbsp;<span>总配置 :</span>&nbsp;&nbsp;

          <span style="font-weight: bold; color: red">{{
            cardConfig.total_ip.ip_sum_count
          }}</span>
          &nbsp;&nbsp;<span> 已使用 :</span>&nbsp;&nbsp;

          <span style="font-weight: bold; color: red">{{
            cardConfig.total_ip.ip_count
          }}</span>
          &nbsp;&nbsp;<span>可用 :</span>&nbsp;&nbsp;

          <span style="font-weight: bold; color: red">{{
            cardConfig.total_ip.ip_sunused
          }}</span>
        </el-tag>

        <!-- <el-tag>
          &nbsp;&nbsp;<span>总微信配置 :</span>&nbsp;&nbsp;

          <span style="font-weight: bold; color: red">{{
            cardConfig.wx_total_ip.ip_sum_count
          }}</span>
          &nbsp;&nbsp;<span> 已使用 :</span>&nbsp;&nbsp;

          <span style="font-weight: bold; color: red">{{
            cardConfig.wx_total_ip.ip_count
          }}</span>
          &nbsp;&nbsp;<span>可用 :</span>&nbsp;&nbsp;

          <span style="font-weight: bold; color: red">{{
            cardConfig.wx_total_ip.ip_sunused
          }}</span>
        </el-tag> -->
        <!-- <el-button
          class="filter-item"
          plain
          type="primary"
          size="mini"
          @click="addIP_card"
          >添加IP</el-button
        > -->

        <el-button
          @click="addIP_card"
          plain
          class="filter-item"
          style="margin-left: 10px"
          type="primary"
          size="mini"
          :disabled="change_rote('todayApply_btn_card')"
        >
          今日服务申请
          <span style="font-weight: bold; color: red; margin-left: 5px">{{
            todayApplyAmount || 0
          }}</span>
          实下
          <span style="font-weight: bold; color: red; margin-left: 5px">{{
            todayApplyshi || 0
          }}</span>
        </el-button>
        <el-popover ref="popover4" placement="bottom" trigger="click">
          <div class="aa">
            <div class="head">
              <span style="margin-right: 20px">申请时间</span>
              <el-date-picker
                v-model="value1_today"
                type="datetime"
                placeholder="时间:从"
                value-format="yyyy-MM-dd HH:mm:ss"
                format="yyyy-MM-dd"
              />
              <el-button
                style="margin-left: 20px"
                type="primary"
                @click="onSubmit_today"
                >查询</el-button
              >
            </div>

            <div>
              <el-table
                :key="tableKey"
                :data="cardConfig.todayApplyDetailList || [{}]"
                height="650"
                border
                fit
                highlight-current-row
                style="width: 100%"
                @sort-change="sortChange"
                :row-class-name="tableRowClassName"
                :default-sort="{ order: 'ascending' }"
              >
                <el-table-column
                  type="index"
                  label="序号"
                  prop="id"
                  min-width="10"
                ></el-table-column>
                <el-table-column label="订单类型" align="center" min-width="50">
                  <template slot-scope="{ row }">
                    <span>{{
                      row.apply_type == 2 ? "平台申请" : "个人申请"
                    }}</span>
                  </template>
                </el-table-column>

                <el-table-column
                  label="服务数量"
                  min-width="50"
                  align="center"
                  prop="amount"
                >
                  <template slot-scope="{ row }">
                    <span>{{ row.amount }}</span>
                  </template>
                </el-table-column>
                <el-table-column
                  label="微信IP数量"
                  min-width="50"
                  align="center"
                  prop="wxip_amount"
                >
                  <template slot-scope="{ row }">
                    <span>{{ row.wxip_amount }}</span>
                  </template>
                </el-table-column>
                <el-table-column
                  label="备注信息"
                  min-width="80"
                  class-name="end_times"
                  align="center"
                >
                  <template slot-scope="{ row }">
                    <span>{{ row.name }}</span>
                  </template>
                </el-table-column>
                <el-table-column
                  label="申请时间"
                  min-width="50"
                  class-name="end_times"
                  align="center"
                >
                  <template slot-scope="{ row }">
                    <span>{{ row.pl_apply_time | masDateFormat }}</span>
                  </template>
                </el-table-column>
                <el-table-column
                  label="收款状态"
                  min-width="50"
                  class-name="end_times"
                  align="center"
                >
                  <template slot-scope="{ row }">
                    <span>{{ row.is_receipt }}</span>
                  </template>
                </el-table-column>
                <el-table-column
                  label="IP购买状态"
                  min-width="50"
                  class-name="end_times"
                  align="center"
                >
                  <template slot-scope="{ row }">
                    <span>{{ row.is_buy_ip }}</span>
                  </template>
                </el-table-column>
                <el-table-column
                  label="微信IP购买状态"
                  min-width="50"
                  class-name="end_times"
                  align="center"
                >
                  <template slot-scope="{ row }">
                    <span>{{ row.is_buy_wxip }}</span>
                  </template>
                </el-table-column>
                <el-table-column
                  label="交付状态"
                  min-width="50"
                  class-name="end_times"
                  align="center"
                >
                  <template slot-scope="{ row }">
                    <span>{{ row.is_offer }}</span>
                  </template>
                </el-table-column>
              </el-table>
            </div>
          </div>
        </el-popover>
        <!-- 续费 -->
        <el-button
          plain
          class="filter-item"
          style="margin-left: 10px"
          type="primary"
          size="mini"
          :disabled="change_rote('fiveDayRenew_card')"
          @click="handthreeDay"
        >
          五天内需续费数
          <span style="font-weight: bold; color: red"
            >{{ renewIpAmount }} &nbsp;</span
          >
          实续
          <span style="font-weight: bold; color: red; margin-left: 5px">{{
            renewIpAmountshi || 0
          }}</span>
        </el-button>
        <el-popover ref="popover5" placement="bottom" trigger="click">
          <div class="aa">
            <div class="head">
              <span style="margin-right: 20px">申请时间</span>
              <el-date-picker
                v-model="value1_renew"
                type="datetime"
                placeholder="时间:从"
                value-format="yyyy-MM-dd HH:mm:ss"
                format="yyyy-MM-dd HH:mm:ss"
              />
              <el-button
                style="margin-left: 20px"
                type="primary"
                @click="onSubmit_renew"
                >全部续费</el-button
              >
            </div>
            <div>
              <el-table
                :key="tableKey"
                v-loading="listLoading"
                element-loading-text="拼命加载中"
                element-loading-spinner="el-icon-loading"
                element-loading-background="rgba(0, 0, 0, 0.6)"
                :data="cardConfig.renewIpAmountDetailList || [{}]"
                height="700"
                border
                highlight-current-row
                :default-sort="{ order: 'ascending' }"
              >
                <el-table-column
                  type="index"
                  label="序号"
                  align="center"
                  min-width="10"
                ></el-table-column>

                <el-table-column label="小组" min-width="50" align="center">
                  <template slot-scope="{ row }">
                    <span>{{ row.group_name }}</span>
                  </template>
                </el-table-column>
                <el-table-column
                  label="卡"
                  min-width="50"
                  class-name="warn_time"
                  align="center"
                >
                  <template slot-scope="{ row }">
                    <span>
                      {{ row.bank_user }}&emsp;{{ row.bank_name }}
                      <br />
                      {{ row.bank_card }}
                    </span>
                  </template>
                </el-table-column>
                <el-table-column
                  label="IP"
                  min-width="50"
                  class-name="end_times"
                  align="center"
                >
                  <template slot-scope="{ row }">
                    <span>{{ row.ip }}</span>
                  </template>
                </el-table-column>
                <el-table-column
                  label="到期时间"
                  min-width="50"
                  class-name="end_times"
                  align="center"
                >
                  <template slot-scope="{ row }">
                    <span>{{ row.end_time }}</span>
                  </template>
                </el-table-column>
                <el-table-column
                  label="续费款状态"
                  min-width="50"
                  class-name="end_times"
                  align="center"
                >
                  <template slot-scope="{ row }">
                    <span>{{ row.ip_renew }}</span>
                  </template>
                </el-table-column>
                <el-table-column
                  label="服务器续费状态"
                  min-width="50"
                  class-name="end_times"
                  align="center"
                >
                  <template slot-scope="{ row }">
                    <span>{{ row.is_receipt }}</span>
                  </template>
                </el-table-column>
                <el-table-column
                  label="操作"
                  min-width="50"
                  class-name="end_times"
                  align="center"
                >
                  <template slot-scope="{ row }">
                    <el-button
                      type="text"
                      @click="applyReceive(row.id, row.bank_user)"
                      >服务器续费</el-button
                    >&emsp;&emsp;
                    <el-button
                      type="text"
                      @click="renewReceive(row.id, row.bank_user)"
                      >已收款</el-button
                    >
                  </template>
                </el-table-column>
              </el-table>
            </div>
          </div>
        </el-popover>
        <el-button
          class="filter-item"
          style="margin-left: 10px; color: red"
          type="primary"
          size="mini"
          plain
          @click="notice"
          :disabled="change_rote('noticenotify_card')"
        >
          协查通知
          <span style="font-weight: bold; color: red">{{
            xie_total_amount || 0
          }}</span>
        </el-button>
      </div>
    </div>
    <el-row :gutter="6">
      <el-col :span="18">
        <div class="content">
          <div class="left">
            <el-table
              :key="tableKey"
              v-loading="listLoading"
              element-loading-text="拼命加载中"
              element-loading-spinner="el-icon-loading"
              element-loading-background="rgba(0, 0, 0, 0.6)"
              :data="cardConfig.list || []"
              height="700"
              :cell-class-name="tableCessClassName"
              border
              highlight-current-row
              :default-sort="{ prop: 'ip_end_time', order: 'descending' }"
              :row-class-name="tableRowClassName"
              :header-row-class-name="headerStyle"
            >
              <el-table-column
                type="index"
                label="序号"
                align="center"
                min-width="10"
              ></el-table-column>
              <el-table-column label="代理/小组" align="center" min-width="20">
                <template slot-scope="{ row }">
                  <el-button type="text" @click="group_detail(row.id)"
                    >{{ row.agent_name }}<br />{{ row.group_name }}</el-button
                  >
                </template>
              </el-table-column>
              <!-- <el-table-column label="识别码" align="center" min-width="50">
            <template slot-scope="{ row }">
              <el-button type="text" @click="group_detail(row.id)">{{ row.cookie }}</el-button>
            </template>
          </el-table-column> -->
              <el-table-column
                label="账号"
                align="left"
                header-align="center"
                min-width="40"
              >
                <template slot-scope="{ row }">
                  <span>
                    {{ row.bank }} &nbsp;&nbsp;
                    {{ row.name }}
                    <br />
                    {{ row.bank_no }}
                  </span>
                </template>
              </el-table-column>

              <el-table-column label="额度" min-width="25" align="center">
                <template slot-scope="{ row }">
                  <span>{{ row.balance }}</span>
                </template>
              </el-table-column>
              <el-table-column
                label="手机号"
                min-width="30"
                class-name="warn_time"
                align="center"
              >
                <template slot-scope="{ row }">
                  <span>{{ row.private_key }}</span>
                </template>
              </el-table-column>
              <!-- <el-table-column
            label="微信ID"
            min-width="30"
            class-name="end_times"
            align="center"
          >
            <template slot-scope="{ row }">
              <span>{{ row.wechat_id }}</span>
            </template>
          </el-table-column> -->
              <!-- <el-table-column
            label="微信版本"
            min-width="15"
            class-name="end_times"
            align="center"
          >
            <template slot-scope="{ row }">
              <span>{{ row.bind_ip }}</span>
            </template>
          </el-table-column> -->
              <el-table-column
                label="IP"
                min-width="25"
                class-name="end_times"
                align="center"
              >
                <template slot-scope="{ row }">
                  <span>{{ row.addr }}</span>
                </template>
              </el-table-column>
              <el-table-column
            label="微信IP"
            min-width="25"
            class-name="end_times"
            align="center"
          >
            <template slot-scope="{ row }">
              <span>{{ row.addr_wx }}</span>
            </template>
          </el-table-column>
              <el-table-column
                label="版本"
                min-width="10"
                class-name="end_times"
                align="center"
              >
                <template slot-scope="{ row }">
                  <span>{{ row.version }}</span>
                </template>
              </el-table-column>
              <el-table-column
                label="绑定商户"
                min-width="40"
                class-name="end_times"
                align="center"
              >
                <template slot-scope="{ row }">
                  <span>
                    {{ row.business_name }}
                    <br />
                    {{ row.business_no }}
                  </span>
                </template>
              </el-table-column>
              <el-table-column
                label="类型"
                min-width="20"
                class-name="end_times"
                align="center"
              >
                <template slot-scope="{ row }">
                  <span v-if="row.use_type === 1">系统使用</span>
                  <span v-if="row.use_type === 2">APP使用</span>
                </template>
              </el-table-column>
              <el-table-column
                label="状态"
                min-width="15"
                class-name="end_times"
                align="center"
              >
                <template slot-scope="{ row }">
                  <span v-if="row.state === 1">
                    <b style="color: red">停用</b>
                  </span>
                  <span v-if="row.state === 0">
                    <span style="color: green">启用</span>
                  </span>
                </template>
              </el-table-column>
              <el-table-column
                label="监控状态"
                min-width="20"
                class-name="end_times"
                align="center"
              >
                <template slot-scope="{ row }">
                  <span v-if="row.is_online === 0">
                    <span style="color: red">离线</span>
                  </span>
                  <span v-if="row.is_online === 1">
                    <b style="color: green">在线</b>
                  </span>
                  <span v-if="row.is_online === 2">
                    <span style="color: red">手机掉线</span>
                  </span>
                  <span v-if="row.is_online === 4">
                    <b style="color: red">监控掉线</b>
                  </span>
                  <span v-if="row.is_online === 5">
                    <span style="color: red">司法停卡</span>
                  </span>
                </template>
              </el-table-column>
              <el-table-column
                label="测试状态"
                min-width="30"
                class-name="end_times"
                align="center"
              >
                <template slot-scope="{ row }">
                  <span v-if="row.is_test === 1">
                    <b style="color: green">通过</b>
                  </span>
                  <span v-if="row.is_test === 0">
                    <span style="color: red">未通过</span>
                  </span>
                </template>
              </el-table-column>
              <el-table-column
                :label="'到期时间 '"
                min-width="40"
                class-name="end_times"
                align="center"
                prop="ip_end_time"
                sortable
              >
                <template slot-scope="{ row }">
                  <span>
                    <span v-if="row.ip_end_time != '1977-01-01'">{{
                      row.ip_end_time | masDateFormat
                    }}</span>
                  </span>
                </template>
              </el-table-column>

              <el-table-column
                label="备注"
                align="center"
                min-width="50"
                class-name="small-padding fixed-width"
              >
                <template slot-scope="scope">
                  <span>{{ scope.row.note || "暂无备注" }}</span
                  ><br />
                  <el-button
                    size="mini"
                    type="primary"
                    plain
                    style="width: 50px"
                    @click="addIndex(scope.row.note, scope.row)"
                    >编辑</el-button
                  >
                </template>
              </el-table-column>

              <el-table-column
                label="操作"
                align="center"
                min-width="60"
                class-name="small-padding fixed-width"
              >
                <template slot-scope="scope">
                  <!-- <span
                @click="enable(scope.$index,cardConfig.list[scope.$index].state)"
                style="margin:0px 3px; cursor:pointer ; "
                :style="cardConfig.list[scope.$index].state?{color:'#409EFF'}:{color:'red'}"
              >{{cardConfig.list[scope.$index].state?'启用':'停用'}}</span>-->

                  <el-button
                    v-if="scope.row.addr"
                    plain
                    type="primary"
                    :disabled="change_rote('listEdit_card')"
                    @click="enable01(scope.row.id, scope.row.name)"
                    >修改服务端</el-button
                  >

                  <!-- <span
                @click="enable02(scope.$index,cardConfig.list[scope.$index].is_test)"
                style="margin:0px 3px;cursor:pointer ; "
                :style="!cardConfig.list[scope.$index].is_test?{color:'#409EFF'}:{color:'red'}"
              >{{cardConfig.list[scope.$index].is_test?'未通过':'通过'}}</span>-->
                  <section v-else>
                    <el-button
                      size="mini"
                      plain
                      type="primary"
                      :disabled="change_rote('listEdit_card')"
                      style="margin-bottom: 8px"
                      @click="handleDelete(scope.row.private_key, scope.row.id)"
                      >分配IP</el-button
                    >
                    <el-button
                      plain
                      type="primary"
                      :disabled="change_rote('listEdit_card')"
                      @click="enable01(scope.row.id, scope.row.name,'ip')"
                      >手动添加服务端</el-button
                    >
                    
                  </section>
                  <el-button
                      style="margin-top:3px;"
                      plain
                      type="primary"
                      :disabled="change_rote('listEdit_card')"
                      @click="enable01(scope.row.id, scope.row.name,'wx')"
                      >手动添加微信服务端</el-button
                    >
                </template>
              </el-table-column>
            </el-table>
          </div>
        </div>
      </el-col>
      <el-dialog
        :visible.sync="addIndexs"
        width="450px"
        title="备注信息"
        class="dialog_edit"
        center
      >
        <el-form label-width="120px" ref="add_Index">
          <el-form-item label="备注">
            <el-input
              style="width: 200px"
              v-model="notes"
              placeholder="请输入内容"
            ></el-input>
          </el-form-item>
          <el-form-item>
            <el-button type="info" @click="addIndexs = false">取 消</el-button>
            <el-button
              class="confirm"
              type="primary"
              @click="setNotes(index_edit.id, notes, index_edit.cookie)"
              >确定</el-button
            >
          </el-form-item>
        </el-form>
      </el-dialog>
      <el-col :span="3">
        <div class="content">
          <div class="right00">
            <div class="right">
              <h3 style="margin-bottom: 10px; text-align: center">服务IP</h3>
              <el-table
                :key="tableKey"
                v-loading="listLoadingIP"
                element-loading-text="拼命加载中"
                element-loading-spinner="el-icon-loading"
                element-loading-background="rgba(0, 0, 0, 0.6)"
                :data="cardConfig.ips || [{}]"
                max-height="600"
                border
                highlight-current-row
                :default-sort="{ order: 'ascending' }"
                :row-class-name="tableRowClassName"
              >
                <el-table-column
                  label="收款状态"
                  min-width="50"
                  class-name="end_times"
                  align="center"
                >
                  <template slot-scope="{ row }">
                    <span>{{ row[0] }}</span>
                  </template>
                </el-table-column>
                <el-table-column
                  label="到期时间"
                  min-width="50"
                  class-name="end_times"
                  align="center"
                >
                  <template slot-scope="{ row }">
                    <span>{{ row[1] | masDateFormat }}</span>
                  </template>
                </el-table-column>
                <el-table-column
                  label="备注"
                  min-width="30"
                  class-name="end_times"
                  align="center"
                >
                  <template slot-scope="{ row }">
                    <el-button
                      type="primary"
                      @click="clear_ip(row[0])"
                      size="mini"
                      round
                      :disabled="change_rote('IPlistEdit_card')"
                      >删除</el-button
                    >
                  </template>
                </el-table-column>
              </el-table>
            </div>
          </div>
        </div>
      </el-col>
      <el-col :span="3">
        <div class="content">
          <div class="right00">
            <div class="right">
              <h3 style="margin-bottom: 10px; text-align: center">回收IP</h3>
              <el-table
                :key="tableKey"
                v-loading="listLoadingBack"
                element-loading-text="拼命加载中"
                element-loading-spinner="el-icon-loading"
                element-loading-background="rgba(0, 0, 0, 0.6)"
                :data="recoveryIpList || []"
                max-height="600"
                border
                highlight-current-row
                :default-sort="{ order: 'ascending' }"
                :row-class-name="tableRowClassName"
              >
                <el-table-column
                  label="收款状态"
                  min-width="50"
                  class-name="end_times"
                  align="center"
                >
                  <template slot-scope="{ row }">
                    <span>{{ row.ip }}</span>
                  </template>
                </el-table-column>
                <el-table-column
                  label="到期时间"
                  min-width="50"
                  class-name="end_times"
                  align="center"
                >
                  <template slot-scope="{ row }">
                    <span>{{ row.end_time | masDateFormat }}</span>
                  </template>
                </el-table-column>
                <el-table-column
                  label="备注"
                  min-width="30"
                  class-name="end_times"
                  align="center"
                >
                  <template slot-scope="{ row }">
                    <el-button
                      type="primary"
                      @click="clear_ip(row.ip)"
                      size="mini"
                      round
                      :disabled="change_rote('IPlistEdit_card')"
                      >删除</el-button
                    >
                  </template>
                </el-table-column>
              </el-table>
            </div>
          </div>
        </div>
      </el-col>
    </el-row>
    <!-- 分页 -->
    <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="cardConfig.input02.page"
      :page-sizes="[20, 50, 100, 200, 2000]"
      :page-size="20"
      layout="total, sizes, prev, pager, next, jumper"
      :total="cardConfig.total"
    ></el-pagination>
  </div>
</template>

<script>
//引入vuex
import { mapState } from "vuex"
//引入接口
import {
  getPlatformList,
  getCardList_card,
  getUsableBankPayIp_card,
  getAgents_card,
  SetPaywayNote,
  setBankPayCardState,
  setBankPayCardServer,
  test_state_card,
  AllotBankPayIp_card,
  delUsableBankPayIp_card,
  AddBankPayIp_card,
  changeBankType_card,
  todayApplyAmount_card,
  renewIpAmount_card,
  todayApplyDetail_card,
  renewIpAmountDetail_card,
  applyReceive_card,
  renewReceive_card,
  renewAllIp_card,
  getUsableBankPayWxIp_card,
  assistSearchList_card,
  getRecycleIp_card,
  realRenewAmount_card,
  realIpAmount_card,
  allStatisticsInfo_card,
  changeAliyunMoney_card,
  refreshAliyunMoney_card,
  setWxBankPayCardServer_card
} from "@/api/table"
//引入组件
import todayApply from "@/views/cardConfig/page/todayApply"

export default {
  data() {
    //IP校验规则
    var checkIP = (rule, value, callback) => {
      var IP =
        "^((25[0-5]|2[0-4]\\d|[1]{1}\\d{1}\\d{1}|[1-9]{1}\\d{1}|\\d{1})($|(?!\\.$)\\.)){4}$"
      var patt1 = new RegExp(IP)
      if (!value) {
        return callback(new Error("IP地址不能为空"))
      }
      setTimeout(() => {
        if (!patt1.test(value)) {
          callback(new Error("请输入正确的IP地址"))
        } else {
          callback()
        }
      }, 1000)
    }
    return {
      showDiv: false,
      total_list: [],
      list_detail: [],
      notes: "",
      index_edit: {},
      aly_money: "",
      aly_changeMoney: "",
      addIndexs: false,
      value1_today: "",
      value1_renew: "",
      todayApplyAmount: "",
      todayApplyshi: "",
      todayApplywxAmount: "",
      renewIpAmount: "",
      renewIpAmountshi: "",
      policeman1: "",
      policeman2: "",
      todayApplys: false,
      listLoading: true,
      listLoadingIP: true,
      listLoadingBack: true,
      tableKey: 0,
      activeName: localStorage.getItem("id") || "1",
      dialogFormVisible: false,
      rules01: {
        ip: [{ validator: checkIP, trigger: "blur" }],
        end_time: [
          { required: true, message: "到期时间不能空", trigger: "blur" },
        ],
        add_time: [
          { required: true, message: "续费时间不能空", trigger: "blur" },
        ],
      },
      xie_total_amount: "",
      payway_bank_list: [],
      recoveryIpList: [],
      allStatis_show: false,
      aly_state: {},
      btn_role: JSON.parse(localStorage.btn),
      // todayApplay_btn: true,
      // fiveDayRenew_btn: true,
      // accountBalanceAdd_btn: true,
      // changemoney_btn: true,
      // listEdit_btn: true,
      // IPlistEdit_btn: true,
      // noticenotify_btn: true,
    }
  },
  created() {
    this.getList_sort() //获取分类数组
    this.realRenewAmount_card()
  },
  methods: {
    change_rote(e) {
      var list = this.btn_role
      if (list.find((i) => i.name == e)) {
        return false
      } else {
        return true
      }
    },
    add_money(label, change) {
      if (label) {
        var money = this.aly_changeMoney
      } else {
        var money = this.aly_money
        if (change) {
          money = -money
        }
      }
      changeAliyunMoney_card({
        money,
        label,
      }).then((res) => {
        if (res.status == 0) {
          if (change) {
            this.$message({
              type: "success",
              message: "减少成功",
            })
          } else {
            this.$message({
              type: "success",
              message: res.msg,
            })
          }
          this.aly_changeMoney = ""
          this.aly_money = ""
          refreshAliyunMoney_card({}).then((res) => {
            this.aly_state = res

            this.realRenewAmount_card()
          })
        } else {
          if (change) {
            this.$message({
              type: "error",
              message: "减少失败",
            })
          } else {
            this.$message({
              type: "error",
              message: res.msg,
            })
          }
        }
      })
    },
    goDetail(key) {
      if (key == "3") {
        this.$router.push("../statisticalReport/payStatistics")
      } else if (key == "4") {
        this.$router.push("../statisticalReport/payStatistics")
      }
      if (key == "5") {
        this.dialogFormVisible = true
        refreshAliyunMoney_card({}).then((res) => {
          this.aly_state = res
          // // 阿里账户余额增减
          // var list = this.btn_role
          // var name = this.$refs["accountBalanceAdd_btn"].$attrs.name
          // if (list.find((i) => i.name == name)) {
          //   this.accountBalanceAdd_btn = false
          // } else {
          //   this.accountBalanceAdd_btn = true
          // }
          // var name = this.$refs["changemoney_btn"].$attrs.name
          // if (list.find((i) => i.name == name)) {
          //   this.changemoney_btn = false
          // } else {
          //   this.changemoney_btn = true
          // }
        })
      }
    },
    realRenewAmount_card() {
      realRenewAmount_card({
        pid: localStorage.getItem("id") || this.$store.state.cardConfig.sort_id,
      }).then((res) => {
        this.renewIpAmountshi = res.data
      })
      realIpAmount_card({
        pid: localStorage.getItem("id") || this.$store.state.cardConfig.sort_id,
      }).then((res) => {
        this.todayApplyshi = res.data
      })
      this.allStatis_show = true
      this.total_list = []
      allStatisticsInfo_card({
        pid: localStorage.getItem("id") || this.$store.state.cardConfig.sort_id,
      }).then((res) => {
        
        this.policeman1 = res.policeman1

        this.total_list = res.data
        refreshAliyunMoney_card({}).then((respont) => {
          this.aly_state = respont
          this.policeman2 = respont.policeman2
          this.total_list.push({
            title: "阿里账户余额",
            data: this.aly_state.money,
            add: this.aly_state.remain_money,
          })
        })

        // console.log(this.total_list)
        this.allStatis_show = false
      })
    },
    async logout() {
      await this.$store.dispatch("user/logout")
      this.$router.push(`/login?redirect=${this.$route.fullPath}`)
    },

    addIndex(id, row) {
      this.notes = id
      // console.log(row,'row');
      this.index_edit = row
      this.addIndexs = true
      this.$nextTick(() => {
        this.$refs["add_Index"].clearValidate()
      })
    },
    getRecycleIp_card() {
      getRecycleIp_card({
        pid: localStorage.getItem("id") || this.$store.state.cardConfig.sort_id,
      }).then((res) => {
        this.recoveryIpList = res.data
        this.listLoadingBack = false
      })
    },
    assistSearchList_card() {
      assistSearchList_card({
        pid: localStorage.getItem("id") || this.$store.state.cardConfig.sort_id,
      }).then((res) => {
        this.xie_total_amount = res.data.total_amount
        this.payway_bank_list = []
        for (var i in res.data.payway_bank_list) {
          this.payway_bank_list.push({
            keys: i,
            values: res.data.payway_bank_list[i],
          })
        }
      })
    },
    renewReceive(id, name) {
      renewReceive_card({
        id: id,
        pid: localStorage.getItem("id") || this.$store.state.cardConfig.sort_id,
      }).then((res) => {
        if (res.status == 1) {
          this.$message({
            type: "warning",
            message: `用户 : ${name} ${res.msg}`,
          })
        } else if (res.status == 0) {
          this.$message({
            type: "success",
            message: `用户 : ${name} ${res.msg}`,
          })
        }
      })
    },
    applyReceive(id, name) {
      applyReceive_card({
        id: id,
        pid: localStorage.getItem("id") || this.$store.state.cardConfig.sort_id,
      }).then((res) => {
        // console.log(res)
        if (res.status == 1) {
          this.$message({
            type: "warning",
            message: `用户 : ${name} ${res.msg}`,
          })
        } else if (res.status == 0) {
          this.$message({
            type: "success",
            message: `用户 : ${name} ${res.msg}`,
          })
        }
      })
    },
    onSubmit_today() {
      this.todayApplyDetail_card()
    },
    onSubmit_renew() {
      this.renewIpAmountDetail_card()
      renewAllIp_card({
        pid: localStorage.getItem("id") || this.$store.state.cardConfig.sort_id,
      }).then((res) => {
        if (res.status === 0) {
          this.$message({
            type: "success",
            message: "全部续费成功",
          })
        }
      })
      this.$message({
        type: "warning",
        message: "该功能暂未启用",
      })
    },
    renewIpAmountDetail_card() {
      this.$store.commit("renewIpAmountDetailList_card", [])
      renewIpAmountDetail_card({
        start_time: this.get_time()[0],
        end_time: this.GetDateStr(4),
        pid: localStorage.getItem("id") || this.$store.state.cardConfig.sort_id,
      }).then((res) => {
        // console.log(res.data);

        this.$store.commit("renewIpAmountDetailList_card", res.data)
      })
    },
    //获取时间
    get_time() {
      let mm =
        new Date().getMonth() + 1 < 10
          ? "0" + (new Date().getMonth() + 1)
          : new Date().getMonth() + 1
      let yy =
        new Date().getFullYear() < 10
          ? "0" + new Date().getFullYear()
          : new Date().getFullYear()
      let dd =
        new Date().getDate() < 10
          ? "0" + new Date().getDate()
          : new Date().getDate()
      let hh = new Date().getHours()
      let mf =
        new Date().getMinutes() < 10
          ? "0" + new Date().getMinutes()
          : new Date().getMinutes()
      let ss =
        new Date().getSeconds() < 10
          ? "0" + new Date().getSeconds()
          : new Date().getSeconds()
      var value =
        yy + "-" + mm + "-" + dd + " " + "00" + ":" + "00" + ":" + "00 "
      var value01 =
        yy + "-" + mm + "-" + dd + " " + "23" + ":" + "59" + ":" + "59 "
      return [value, value01]
    },
    todayApplyDetail_card() {
      this.get_time()
      this.$store.commit("todayApplyDetailList_card", [])
      todayApplyDetail_card({
        start_time: this.value1_today,
        pid: localStorage.getItem("id") || this.$store.state.cardConfig.sort_id,
        start_time: this.get_time()[0],
        end_time: this.get_time()[1],
      }).then((res) => {
        // console.log(res.data);
        this.$store.commit("todayApplyDetailList_card", res.data)
      })
    },
    todayApplyAmount_card() {
      this.todayApplyAmount = ""
      this.todayApplywxAmount = ""
      todayApplyAmount_card({
        pid: localStorage.getItem("id") || this.$store.state.cardConfig.sort_id,
      }).then((res) => {
        // console.log(res.data);
        this.todayApplyAmount = res.data.ipAmount
        this.todayApplywxAmount = res.data.wxIpAmount
      })
    },
    GetDateStr(AddDayCount) {
      var dd = new Date()
      dd.setDate(dd.getDate() + AddDayCount) //获取AddDayCount天后的日期
      var y = dd.getFullYear()
      var m =
        dd.getMonth() + 1 < 10 ? "0" + (dd.getMonth() + 1) : dd.getMonth() + 1 //获取当前月份的日期，不足10补0
      var d = dd.getDate() < 10 ? "0" + dd.getDate() : dd.getDate() //获取当前几号，不足10补0
      // console.log(y + "-" + m + "-" + d)
      return y + "-" + m + "-" + d + " " + "23" + ":" + "59" + ":" + "59 "
    },
    // 五天后续费
    renewIpAmount_card() {
      this.renewIpAmount = ""
      renewIpAmount_card({
        start_time: this.get_time()[0],
        end_time: this.GetDateStr(4),
        pid: localStorage.getItem("id") || this.$store.state.cardConfig.sort_id,
      }).then((res) => {
        // console.log('五天后续费',res.data)
        this.renewIpAmount = res.data
      })
    },
    handleClick(tab, event) {
      // console.log(tab.name)
      localStorage.setItem("id", tab.name)
      this.recoveryIpList = []
      this.listLoading = true
      this.listLoadingIP = true
      this.listLoadingBack = true
      this.$store.commit("clearList_card")
      this.getData_card()
      this.getUsableBankPayIp_card() //获取IP，卡总数
      this.getAngents() //获取所有代理小组
      this.todayApplyAmount_card() //今日申请IP数量
      this.renewIpAmount_card() //三天缴费 数量
      this.todayApplyDetail_card() //获取当日详情
      this.renewIpAmountDetail_card() //获取三天详情
      this.getRecycleIp_card()
      this.realRenewAmount_card()
    },
    getAngents() {
      getAgents_card({
        pid: localStorage.getItem("id") || this.$store.state.cardConfig.sort_id,
      }).then((res) => {
        // console.log(res.data)
        this.$store.commit("getAgents_card", res.data)
      })
    },
    getList_sort() {
      getPlatformList().then((res) => {
        // console.log(res.data)
        this.$store.commit("getSortList_card", res.data)
        this.getData_card() //获取表格数据
        this.getUsableBankPayIp_card() //获取IP，卡总数
        this.getAngents() //获取所有代理/小组
        this.todayApplyAmount_card() //今日申请IP数量
        this.renewIpAmount_card() //五天缴费 数量
        this.todayApplyDetail_card() //获取当日详情
        this.renewIpAmountDetail_card() //获取五天续费详情
        this.getUsableBankPayWxIp_card() //获取微信IP
        this.assistSearchList_card() //获取协查总数
        this.getRecycleIp_card()
      })
    },
    getUsableBankPayIp_card() {
      getUsableBankPayIp_card({
        pid: localStorage.getItem("id") || this.$store.state.cardConfig.sort_id,
      }).then((res) => {
        // console.log(res.data)
        this.$store.commit("getUsableBankPayIp_card", res.data)
        this.listLoadingIP = false
      })
    },
    getData_card() {
      this.listLoading = true
      this.$store.commit("clearList_card")
      getCardList_card({
        pid: localStorage.getItem("id") || this.$store.state.cardConfig.sort_id,
        ...this.$store.state.cardConfig.input02,
      }).then((res) => {
        if (res.status == 2) {
          this.logout()
        }
        this.list_detail = res.data.list
        this.$store.commit("getDataList_card", res.data)
        this.listLoading = false
      })
    },
    onSubmit() {
      this.$store.commit("clearpageList_card")
      this.getData_card()
    },
    enable(id, state) {
      if (state) {
        this.$confirm("确认启动吗?", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning",
        })
          .then(() => {
            // console.log("启动成功");
            var states = state ? 0 : 1
            setBankPayCardState({
              id: this.$store.state.cardConfig.list[id].id,
              state: states,
              pid:
                localStorage.getItem("id") ||
                this.$store.state.cardConfig.sort_id,
            }).then((res) => {
              if (res.status == 1) {
                this.$message({
                  type: "warning",
                  message: "没有启用权限!",
                })
              } else {
                var state = !state
                state = state ? 0 : 1
                this.$store.commit("changeCheck01_card", {
                  //修改list属性
                  id: id,
                  state: state,
                })
              }
            })
          })
          .catch(() => {
            this.$message({
              type: "info",
              message: "取消操作",
            })
          })
      } else {
        // console.log("false时");

        this.$confirm("确认停用吗?", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning",
        })
          .then(() => {
            // console.log("停用成功");
            var states = state ? 0 : 1
            setBankPayCardState({
              id: this.$store.state.cardConfig.list[id].id,
              state: states,
              pid:
                localStorage.getItem("id") ||
                this.$store.state.cardConfig.sort_id,
            }).then((res) => {
              var state = !state
              state = state ? 1 : 0
              this.$store.commit("changeCheck01_card", {
                //修改list属性
                id: id,
                state: state,
              })
            })
          })
          .catch(() => {
            this.$message({
              type: "info",
              message: "取消操作",
            })
          })
      }
    },
    tableCessClassName({ row, column, rowIndex, columnIndex }) {
      // // console.log({ row, column, rowIndex, columnIndex })
      // var time01 = this.$store.state.cardConfig.list[rowIndex].ip_end_time
      // var days = this.countDay(time01)
      // if (days <= 5 && columnIndex == 16) {
      //   return "red_ip"
      // }
      // var time02 = this.$store.state.cardConfig.list[rowIndex].wxip_end_time
      // var days01 = this.countDay(time02)
      // if (days01 <= 5 && columnIndex == 17) {
      //   return "red_ip"
      // }
    },
    //计算天数
    countDay(time01 = "") {
      time01 = time01.replace(/\d{2}:\d{2}:\d{2}/g, "") //数组时间
      //当前时间
      var now = new Date()
      var year = now.getFullYear() //得到年份
      var month = now.getMonth() //得到月份
      var date = now.getDate() //得到日期
      //时分秒
      var hh = now.getHours()
      var mm = now.getMinutes()
      var ss = now.getSeconds()
      month = month + 1
      if (month < 10) month = "0" + month
      if (date < 10) date = "0" + date
      var time = ""
      time = year + "-" + month + "-" + date
      var sDate1 = Date.parse(time)
      var sDate2 = Date.parse(time01)
      var dateSpan = sDate2 - sDate1
      var iDays = Math.floor(dateSpan / (24 * 3600 * 1000))
      return iDays
    },
    enable01(id, row , temp) {
      // console.log(row,'is-d');
      this.$prompt(temp=='wx'?"请输入微信IP":"请输入IP", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        inputErrorMessage: "IP格式不正确",
      })
        .then(({ value }) => {
          if (value == null) {
            value = ""
            if(temp=='wx'){
              setWxBankPayCardServer_card({
                pid:
                  localStorage.getItem("id") ||
                  this.$store.state.cardConfig.sort_id,
                id: id,
                server: value,
              }).then((res) => {
                if (res.status == 0) {
                  this.$message({
                    type: "success",
                    message: res.msg,
                  })
                  this.getData_card() //获取表格数据
                  this.getUsableBankPayIp_card() //获取IP，卡总数
                  this.getRecycleIp_card()
                } else if (res.status == 1) {
                  this.$message({
                    type: "error",
                    message: res.msg,
                  })
                }
              })
            }else{
              setBankPayCardServer({
                pid:
                  localStorage.getItem("id") ||
                  this.$store.state.cardConfig.sort_id,
                card: id,
                server: value,
              }).then((res) => {
                if (res.status == 0) {
                  this.$message({
                    type: "success",
                    message: res.msg,
                  })
                  this.getData_card() //获取表格数据
                  this.getUsableBankPayIp_card() //获取IP，卡总数
                  this.getRecycleIp_card()
                } else if (res.status == 1) {
                  this.$message({
                    type: "error",
                    message: res.msg,
                  })
                }
              })
            }
          } else {
            var IP =
              "^((25[0-5]|2[0-4]\\d|[1]{1}\\d{1}\\d{1}|[1-9]{1}\\d{1}|\\d{1})($|(?!\\.$)\\.)){4}$"

            var patt1 = new RegExp(IP)
            if (!patt1.test(value)) {
              // callback(new Error("请输入正确的IP地址"))
              this.$message({
                type: "error",
                message: "请输入正确的IP地址",
              })
              return false
            }
            // setBankPayCardServer({
            //   pid:
            //     localStorage.getItem("id") ||
            //     this.$store.state.cardConfig.sort_id,
            //   card: id,
            //   server: value,
            // }).then((res) => {
            //   if (res.status == 0) {
            //     this.$message({
            //       type: "success",
            //       message: res.msg,
            //     })
            //     this.getData_card() //获取表格数据
            //     this.getUsableBankPayIp_card() //获取IP，卡总数
            //     this.getRecycleIp_card()
            //   } else if (res.status == 1) {
            //     this.$message({
            //       type: "error",
            //       message: res.msg,
            //     })
            //   }
            // })
            if(temp=='wx'){
              setWxBankPayCardServer_card({
                pid:
                  localStorage.getItem("id") ||
                  this.$store.state.cardConfig.sort_id,
                id: id,
                server: value,
              }).then((res) => {
                if (res.status == 0) {
                  this.$message({
                    type: "success",
                    message: res.msg,
                  })
                  this.getData_card() //获取表格数据
                  this.getUsableBankPayIp_card() //获取IP，卡总数
                  this.getRecycleIp_card()
                } else if (res.status == 1) {
                  this.$message({
                    type: "error",
                    message: res.msg,
                  })
                }
              })
            }else{
              setBankPayCardServer({
                pid:
                  localStorage.getItem("id") ||
                  this.$store.state.cardConfig.sort_id,
                card: id,
                server: value,
              }).then((res) => {
                if (res.status == 0) {
                  this.$message({
                    type: "success",
                    message: res.msg,
                  })
                  this.getData_card() //获取表格数据
                  this.getUsableBankPayIp_card() //获取IP，卡总数
                  this.getRecycleIp_card()
                } else if (res.status == 1) {
                  this.$message({
                    type: "error",
                    message: res.msg,
                  })
                }
              })
            }
          }

          //这里用来发起请求
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "取消输入",
          })
        })
    },
    enable02(id, is_test) {
      if (is_test) {
        // console.log("true时", id, is_test)
        this.$confirm("确认未通过操作吗?", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning",
        })
          .then(() => {
            var states = is_test ? 0 : 1
            test_state_card({
              id: this.$store.state.cardConfig.list[id].id,
              is_test: states,
              pid:
                localStorage.getItem("id") ||
                this.$store.state.cardConfig.sort_id,
            }).then((res) => {
              var is_test = !is_test
              is_test = is_test ? 0 : 1
              this.$store.commit("changeCheck02_card", {
                //修改list属性
                id: id,
                is_test: is_test,
              })
            })
          })
          .catch(() => {
            this.$message({
              type: "info",
              message: "取消操作",
            })
          })
      } else {
        this.$confirm("确认通过操作吗?", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning",
        })
          .then(() => {
            var states = is_test ? 0 : 1
            test_state_card({
              id: this.$store.state.cardConfig.list[id].id,
              is_test: states,
              pid:
                localStorage.getItem("id") ||
                this.$store.state.cardConfig.sort_id,
            }).then((res) => {
              // console.log("成功了没有???")
              var is_test = !is_test
              is_test = is_test ? 1 : 0
              this.$store.commit("changeCheck02_card", {
                //修改list属性
                id: id,
                is_test: is_test,
              })
            })
          })
          .catch(() => {
            this.$message({
              type: "info",
              message: "取消操作",
            })
          })
      }
    },
    handleDelete(key, id) {
      // console.log(key,id);
      AllotBankPayIp_card({
        id: id,
        tel: key,
        pid: localStorage.getItem("id") || this.$store.state.cardConfig.sort_id,
      }).then((res) => {
        if (res.status == 0) {
          this.$message({
            type: "success",
            message: res.msg,
          })
          this.getData_card() //获取表格数据
          this.getUsableBankPayIp_card() //获取IP，卡总数
        } else {
          this.$message({
            type: "warning",
            message: res.msg,
          })
        }
      })
    },
    handleSizeChange(e) {
      this.$store.commit("changelimit_card", e)
      this.getData_card()
    },
    handleCurrentChange(e) {
      this.$store.commit("changepage_card", e)
      this.getData_card()
    },
    setNotes(id, note, cookie) {
      console.log(id, cookie)
      SetPaywayNote({
        id: id,
        note: note,
        pid: localStorage.getItem("id") || this.$store.state.cardConfig.sort_id,
      }).then((res) => {
        if (res.status == 0) {
          this.$message({
            type: "success",
            message: res.msg,
          })
          this.getData_card(cookie)
          this.addIndexs = false
        } else {
          this.$message({
            type: "error",
            message: res.msg || "请重新操作",
          })
        }
      })
    },
    clear_ip(item) {
      delUsableBankPayIp_card({
        ip: item,
        pid: localStorage.getItem("id") || this.$store.state.cardConfig.sort_id,
      })
        .then((res) => {
          if (res.status == 0) {
            this.$message({
              type: "success",
              message: res.msg,
            })
            this.getUsableBankPayIp_card() //获取IP，卡总数
            this.getRecycleIp_card()
          } else {
            this.$message({
              type: "error",
              message: res.msg,
            })
          }
        })
        .catch(() => {
          this.$message({
            type: "error",
            message: "没有删除权限",
          })
        })
    },
    addIP(ip) {
      var IP =
        "^((25[0-5]|2[0-4]\\d|[1]{1}\\d{1}\\d{1}|[1-9]{1}\\d{1}|\\d{1})($|(?!\\.$)\\.)){4}$"
      var patt1 = new RegExp(IP)
      if (!patt1.test(ip)) {
        this.$message({
          type: "error",
          message: "请输入正确的IP地址!",
        })
        return false
      }
      AddBankPayIp_card({
        ip: ip,
        pid: localStorage.getItem("id") || this.$store.state.cardConfig.sort_id,
      }).then({})
    },
    addIP_card() {
      this.$router.push("add_IP")
    },
    leave_ip() {
      this.dialogFormVisible = false
      this.$store.commit("cleartemp_card")
    },
    sortChange(data) {
      const { prop, order } = data
      if (prop === "id") {
        this.sortByID(order)
      }
    },
    closeDialog() {
      this.dialogFormVisible = false
      this.$store.commit("cleartemp_card")
    },
    createData() {
      var add_time = new Date(this.$store.state.cardConfig.temp.add_time)
      var end_time = new Date(this.$store.state.cardConfig.temp.end_time)
      if (add_time <= end_time) {
        this.$refs["dataForm"].validate((valid) => {
          if (valid) {
            //调用接口addNewServe
            AddBankPayIp_card({
              ...this.$store.state.cardConfig.temp,
              pid:
                localStorage.getItem("id") ||
                this.$store.state.cardConfig.sort_id,
            }).then((res) => {
              if (res.status == 0) {
                this.$message({
                  message: "添加IP成功",
                  type: "success",
                })
                this.getUsableBankPayIp_card() //获取IP，卡总数

                this.$store.commit("cleartemp_card")
                this.dialogFormVisible = false
              }
            })
          }
        })
      } else {
        this.$message({
          message: "上次续费时间不能大于到期时间",
          type: "warning",
        })
        this.$refs["dataForm"].validate((valid) => {})
      }
    },
    tableRowClassName({ row, rowIndex }) {
      // console.log(rowIndex % 2)
      if (rowIndex % 2 == 1) {
        return "warning-row"
      } else {
        return "success-row"
      }
    },
    changeAgent_id(value) {
      this.$store.commit("select_card", value)
    },

    handthreeDay() {
      // this.$store.commit("changetodayApplys_card", false)
      this.$router.push("renew")
    },
    notice() {
      this.$router.push("noticePage")
    },
    getUsableBankPayWxIp_card() {
      getUsableBankPayWxIp_card({
        pid: localStorage.getItem("id") || this.$store.state.cardConfig.sort_id,
      }).then((res) => {
        // console.log(res.data, "res");
        this.$store.commit("getUsableBankPayWxIp_card", res.data)
      })
    },
    group_detail(id) {
      console.log(id)
      this.$router.push({
        path: `bankPayCardGroup/${id}`,
      })
    },
    headerStyle({ row, rowIndex }) {
      return "tableStyle"
    },
    changeClass(key, item) {
      if (key == 3 || key == 4) {
        return "rpg"
      }
      if (key == 5) {
        // console.log(this.total_list);
        if (this.policeman1 != 110 && this.policeman2 != 110) {
          return "bgw_cr"
        } else {
          return "bgr_cw"
        }
      }
    },
  },
  components: {
    todayApply,
  },
  computed: {
    ...mapState(["cardConfig"]),
    upOut() {
      if (this.policeman1) {
        return "(报警 :可用余额小于阈值)"
      } else if (this.policeman2) {
        return "(报警 :可用余额小于花费总金额)"
      } else {
        return "(余额充足)"
      }
    },
  },
  mounted() {
    // var list = this.btn_role
    // // 今日服务申请按钮
    // var name = this.$refs["todayApply_btn"].$attrs.name
    // if (list.find((i) => i.name == name)) {
    //   this.todayApplay_btn = false
    // } else {
    //   this.todayApplay_btn = true
    // }
    // // 五天内需要续费按钮
    // var name = this.$refs["fiveDayRenew_btn"].$attrs.name
    // if (list.find((i) => i.name == name)) {
    //   this.fiveDayRenew_btn = false
    // } else {
    //   this.fiveDayRenew_btn = true
    // }

    // // 列表操作权限
    // var name = this.$refs["listEdit_btn"].$attrs.name
    // if (list.find((i) => i.name == name)) {
    //   this.listEdit_btn = false
    // } else {
    //   this.listEdit_btn = true
    // }
    // //ip删除权限
    // var name = this.$refs["IPlistEdit_btn"].$attrs.name
    // if (list.find((i) => i.name == name)) {
    //   this.IPlistEdit_btn = false
    // } else {
    //   this.IPlistEdit_btn = true
    // }
    // //协查通知按钮
    // var name = this.$refs["noticenotify_btn"].$attrs.name
    // if (list.find((i) => i.name == name)) {
    //   this.noticenotify_btn = false
    // } else {
    //   this.noticenotify_btn = true
    // }
  },
  filters: {
    masDateFormat: function (msg = "", pattern = "") {
      if (msg == null) {
        return "-"
      }
      var mt = new Date(msg)
      var y = mt.getFullYear()
      var m = (mt.getMonth() + 1).toString().padStart(2, "0")
      var d = mt.getDate().toString().padStart(2, "0")
      if (pattern == "yyyy-mm-dd") {
        return y + "-" + m + "-" + d
      }
      return y + "-" + m + "-" + d
    },
  },
}
</script>

<style lang='less' scoped>
.rpg {
  position: relative;
}
.rpg .show {
  width: 100%;
  height: 100%;
  color: #000;
  background-color: #fff;
  transition: all 0.5s;
  visibility: hidden;
  position: absolute;
  text-align: center;
  line-height: 50px;
}
.rpg:hover .show {
  // display: block;
  visibility: visible;
  cursor: pointer;
}
.total_nav {
  font-family: "PingFang SC";
  font-size: 14px;
  // width: 550px;
  height: 55px;
  display: flex;
  justify-content: start;
  .list {
    min-width: 90px;
    padding: 2px;
    letter-spacing: 0.2em;
    height: 100%;
    border: 1px solid #ccc;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    align-items: center;
    background-color: #fff;
    border-radius: 6px;
    margin-top: 4px;
    margin-right: 10px;
    .span03 {
      font-size: 12px;
      letter-spacing: 0;
    }
  }
  .list:hover {
    box-shadow: 0px 12px 8px -12px #ccc;
  }
}
.bgr_cw {
  background: red !important;
  color: #fff;
}
.bgw_cr {
  background: #fff;
  color: #000;
}
.bgw_cr .show {
  // visibility: hidden;
  display: none;
}
.bgr_cw .show00 {
  // visibility: hidden;
  display: none;
}

/deep/.el-popover {
  width: 100%;
  height: 100%;
  background-color: red !important;
}
/deep/.el-table {
  color: #000;
  margin-bottom: 30px;
}
.GBO_card {
  overflow: hidden;
  width: 100%;
  height: 100%;
  .nav {
    /deep/.el-tabs__item.is-active {
      color: #409eff;
    }
    /deep/.el-tabs__content {
      display: none;
    }
    /deep/.el-tabs__header {
      margin-bottom: 0;
    }
    /deep/.el-tabs__nav-scroll {
      padding-left: 10px;
    }
    margin-bottom: 2px;
  }
  .head {
    padding: 0px 2px 2px;
    box-sizing: border-box;
    .head01 {
      display: flex;
      // justify-content: start;
      /deep/.el-input {
        // height: 20px;
        overflow: hidden;
        width: 150px;
      }
      /deep/.el-input__inner {
        // height: 20px;
        width: 150px;
      }
      .el-button {
        margin-left: 8px;
        padding: 8px 15px;
      }
    }
    .head02 {
      margin-top: 5px;
      /deep/.el-form-item {
        margin-bottom: 0;
      }
      .el-form /deep/.el-input__inner {
        padding: 0 5px;
      }
      .el-form .el-input {
        font-size: 12px;
      }
      .el-form .one .el-input {
        width: 70px;
      }
      .el-form .two .el-input {
        width: 90px;
      }
      .el-form .three .el-input {
        width: 75px;
      }
      .el-form .four /deep/.el-input__inner {
        width: 100px;
      }
      .el-button {
        margin-left: 3px;
      }
    }
    .head03 {
      margin-top: 2px;
      .el-tag {
        margin-right: 20px;
      }
    }
  }
  .content {
    .left {
      overflow: hidden;
      // height: 100px;
      // background-color: pink;
      /deep/.el-switch__core:after {
        width: 13px;
        height: 13px;
      }
      /deep/.el-switch__core {
        height: 16px;
        width: 30px !important;
      }
      /deep/.el-table .cell {
        padding-left: 5px;
        padding-right: 5px;
      }
      /deep/.el-checkbox {
        margin-right: 5px;
        margin-left: 5px;
      }
      /deep/.el-table {
        font-size: 12px;
      }
      // /deep/.el-table th {
      //   // padding: 6px 0;
      // }
      /deep/.el-input {
        margin-right: 10px;
      }
      /deep/.el-input__inner {
        height: 30px;
        margin-bottom: 8px;
      }
      /deep/.el-button {
        padding: 5px;
      }
    }
    .right00 {
      .right {
        padding-top: 8px;
        background-color: rgb(238, 238, 238);
        box-sizing: border-box;
        /deep/.el-table {
          font-size: 12px;
          background-color: rgb(238, 238, 238);
        }
        /deep/.el-table .cell {
          padding-left: 0px;
          padding-right: 0px;
        }
        /deep/.el-table td {
          padding: 0;
        }
        /deep/.el-button {
          padding: 3px;
          font-size: 10x;
        }
      }
    }
  }
}
/deep/.el-table td {
  padding: 6px;
}
/deep/.el-table .cell {
  padding: 0;
}
/deep/.el-table .red_ip {
  color: #f56c6c !important;
}
/deep/.el-pagination {
  z-index: 999;
  height: 30px;
  width: 65px;
  position: fixed;
  bottom: 0%;
  // background-color: #fff;
}
.addserve {
  /deep/.el-input {
    width: 30% !important;
    text-align: center;
    overflow: Visible !important;
  }
  /deep/.el-input__inner {
    width: 100% !important;
  }
  .box {
    width: 300px;
    background-color: #fff;
    margin-left: 50px;
  }
}
.aa {
  padding: 10px;
  .head {
    margin-bottom: 10px;
  }
}
</style>
